<template>
  <div class="com-title">
    <LineTitle :title="data.label" />
  </div>
  <div class="content flexC">
    <div v-for="(item, index) in data.list" :key="index" class="list">
      <span>{{ index + 1 }}</span>
      <span>{{ item }}</span>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import LineTitle from '@comp/LineTitle/LineTitle.vue'
  // import dataType from './type'
  withDefaults(
    defineProps<{
      data: any
    }>(),
    { data: () => {} }
  )
</script>
<style lang="scss" scoped>
  // 轻松时刻
  .content {
    @extend %about-text;
    flex-direction: column;
    padding: $about-padding;
    line-height: 22px;

    .list {
      margin-bottom: 5px;
      display: flex;
      justify-content: space-between;

      & span:first-child {
        // width: 10%;
        max-height: 25px;
        color: red;
        border: 1px solid #009d2f;
        padding: 1px 6px;
        border-radius: 50%;
        margin-right: 5px;
      }

      & span:last-child {
        width: 92%;
        text-align: left;
      }
    }
  }
</style>
